<template>
  <uni-popup mask-background-color="rgba(0,0,0,0)" @change="event=>$emit('close',event)" ref="pop" type="bottom"
    background-color="#fff">
    <view class="position-use">
      <view class="common-wrap" :style="{'height':height+'px'}">
        <view class="close-btn">
          <uni-icons class="top-icon" color="#959595" size="18" custom-prefix="iconfont"
            type="icon-dibudancengxiangxiashouqi"></uni-icons>
        </view>
        <view class="common-header">
          <view class="common-num">
            评论({{total}})
          </view>
          <view class="sort">
            <text class="text" :class="{active:query.sortType==1}" @click="sortCommon(1)">推荐</text>
            <text class="text" :class="{active:query.sortType==3}" @click="sortCommon(3)">最新</text>
            <text class="text" :class="{active:query.sortType==2}" @click="sortCommon(2)">最热</text>
          </view>
        </view>
        <scroll-view @scrolltolower="loadData" :style="{'height':scrollH+'px'}" scroll-y="true">
          <uni-list :border="false">
            <uni-list-item v-for="(item,idx) in commonList" :key="idx">
              <template v-slot:body>
                <view class="common-item">
                  <view class="common-info">
                    <image class="avator" :src="item.user.avatarUrl" mode=""></image>
                    <view class="user-info">
                      <view class="username">
                        {{item.user.nickname}}
                      </view>
                      <view class="time">
                        {{timeFormat(item.time)}}
                      </view>
                      <view class="common-content">
                        <view class="text">
                          {{item.content}}
                        </view>
                        <view v-if="item.replyCount!==0" class="more">
                          {{item.replyCount}}条回复
                        </view>
                      </view>
                    </view>
                    <view class="likes">
                      <view class="num">
                        {{item.likedCount}}
                      </view>
                      <uni-icons color="#a6a6a6" type="hand-up"></uni-icons>
                    </view>
                  </view>
                </view>
              </template>
            </uni-list-item>
          </uni-list>
          <uni-load-more :status="status"></uni-load-more>
        </scroll-view>
        <view id="ipt" :style="{'bottom':iptH+'px'}" class="ipt-wrap">
          <input :adjust-position="false" @input="iptHandler" :value="common" placeholder="用评论鼓励一下TA吧" class="ipt"
            type="text" @focus="FocusEvent" @blur="blurEvent">
          <view class="btn">
            <uni-icons type=""></uni-icons>
            <text :class="{has:common!==''}" class="text" @click="submit">发送</text>
          </view>
        </view>
      </view>
    </view>

  </uni-popup>
</template>
<script setup>
  import {
    ref,
    defineExpose,
    computed,
    reactive,
    onMounted,
    getCurrentInstance
  } from "vue"
  import {
    getSourceCommon
  } from '@/request/api.js'
  import {
    submitCommon
  } from "@/request/user.js"
  import {
    timeFormat
  } from '@/utils/index.js'
 const props = defineProps({
    height: {
      type: Number,
      default: 0
    }
  })
  const _this = getCurrentInstance()
  const scrollH = ref(0)


  const pop = ref(null)
  const query = reactive({
    type: 5,
    id: null,
    sortType: 3,
    pageSize: 20,
    pageNo: 1,
  })

  const total = ref(0)
  const commonList = ref([])
  const status = ref('more')
  const getCommon = async () => {
    status.value = 'loading'
    const res = await getSourceCommon(query)
    commonList.value.push(...res.data.comments)
    total.value = res.data.totalCount
    if (res.data.hasMore) {
      query.pageNo++
      status.value = 'more'
      if (query.pageNo !== 1 && query.sortType == 3) {
        query.cursor = res.data.cursor
      }
    } else {
      status.value = 'no-more'
    }
  }
  // 重置拉取数据

  const resetLoadData = () => {
    delete query.cursor
    query.pageNo = 1
    query.sortType = 3,
    commonList.value = []
    total.value = ''
  }
  const open = async(id) => {
    resetLoadData()
    pop.value.open()
    query.id = id
   await getCommon()
    
    uni.createSelectorQuery().in(_this).select('#ipt').boundingClientRect(data => {
      scrollH.value = props.height - data.height - 50
    }).exec()
  }
  const sortCommon = (num) => {
    if (num == query.sortType) return
    query.sortType = num
    query.pageNo = 1
    commonList.value = []
    getCommon()
  }
  const loadData = () => {
    if (status.value === 'no-more') {
      return
    }
    getCommon()
  }
  defineExpose({
    open
  })
  const common = ref('')
  const iptHandler = (e) => {
    common.value = e.detail.value.trim()
  }
  const submit = async () => {
    if (!common.value) {
      uni.showToast({
        title: "评论不能为空",
        icon: "none"
      })
      return
    }
    try {
      const res = await submitCommon({
        id: query.id,
        content: common.value
      })
      uni.showToast({
        title: "发送成功"
      })
      // 跳回最新并刷新
      resetLoadData()
      getCommon()
      common.value = ''
    } catch (e) {
      //TODO handle the exception
    }
  }
  const iptH = ref(0)
  const FocusEvent = (e) => {
    iptH.value = e.detail.height
  }
  const blurEvent = (e) => {
    iptH.value = 0
  }
</script>
<style lang="less">
  .common-wrap {
    box-sizing: border-box;
    // padding: 0 42rpx;
    display: flex;
    flex-direction: column;

    .close-btn {
      display: flex;
      justify-content: center;
    }

    .common-header {
      padding: 0 42rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20rpx;

      .common-num {
        font-size: 29rpx;
        font-weight: bold;
      }

      .sort {
        font-size: 26rpx;
        color: #828282;

        .text {
          font-weight: bold;
          padding: 0 10rpx;

          &:nth-child(-n+2) {
            border-right: 1px solid #b9b9b9;
          }

          &.active {
            color: #000;
          }
        }
      }
    }

    .common-item {
      padding: 0 10rpx;
      width: 100%;

      .common-info {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;

        .avator {
          width: 70rpx;
          height: 70rpx;
          border-radius: 50%;
          margin-right: 20rpx;
        }

        .user-info {
          flex: 1;

          .username {
            font-size: 26rpx;
            color: #1d1d1d;
            margin-bottom: 6rpx;
          }

          .time {
            font-size: 22rpx;
            color: #a6a6a6;
            margin-bottom: 10rpx;
          }

          .common-content {
            .text {
              font-size: 26rpx;
              margin-right: -30rpx;
              margin-bottom: 10rpx;
          
            }

            .more {
              font-size: 24rpx;
              color: #5D7A9A;
            }
          }
        }

        .likes {
          display: flex;
          align-items: center;

          .num {
            font-size: 24rpx;
            color: #a6a6a6;
            margin-right: 6rpx;
          }

        }
      }
    }
  }

  .ipt-wrap {
    position: absolute;
    left: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 8rpx 40rpx 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .ipt {
      flex: 1;
      margin-right: 20rpx;

    }

    .text {
      color: #909090;
      &.has{
        color: #000;
        // font-weight: 600;
      }
    }
  }

  .position-use {
    position: relative;
  }
</style>
